<!--
 * @Author: liubei
 * @Date: 2021-08-11 10:54:54
 * @LastEditTime: 2021-08-11 15:01:05
 * @Description: 
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <img src=""
        alt="" srcset="">
    <img src=""
        alt="" srcset="">

    <input type="file" name="" id="filebtn">
    <script>
        (function () {
            var filebtn = document.querySelector('#filebtn');

            filebtn.addEventListener('change', function () {
                var file = this.files[0];

                console.log(file);

                if (!file) return;

                var fileReader = new FileReader();

                fileReader.onload = function (res) {
                    console.log(res.currentTarget.result); // 
                }
                // fileReader.readAsDataURL(file);
            })
        });
    </script>

    <canvas id="cvs" width="1" height="1"></canvas>
    <script>
        (function () {
            var cvs = document.querySelector('#cvs');
            var ctx = cvs.getContext('2d');

            ctx.fillRect(0, 0, 1, 1);
            // console.log(cvs.toDataURL()); // 
            cvs.toBlob(function (b) {
                console.log(b); // Blob {size: 83, type: "image/png"}
            });
        });
    </script>

    <script>
        (function () {
            // 通过string生成blob
            var b = new Blob(['hello, world'], { type: 'text/plain' });

            console.log(b); // Blob {size: 12, type: "text/plain"}

            // 读取text
            b.text().then(res => {
                console.log(res); // hello, world
            });

            b.arrayBuffer().then(res => {
                console.log(res); // ArrayBuffer(12)
            })

            // 读取ReadableStream
            b.stream().getReader().read().then(res => {
                console.log(res); // {value: Uint8Array(12), done: false}
            });
        });
    </script>

    <script>
        (function () {
            fetch('http://localhost:8090/static/1x1.png')
                .then(res => res.blob())
                .then(res => console.log(res)); // Blob {size: 120, type: "image/png"}

            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function () {
                if (this.readyState == 4) {
                    console.log(this.response); // Blob {size: 120, type: "image/png"}
                }
            }
            xhr.open('GET', 'http://localhost:8090/static/1x1.png');
            xhr.responseType = 'blob';
            xhr.send();
        });
    </script>

    <script>
        (function () {
            var b = new Blob(['hello, world'], { type: 'text/plain' });
            var bUrl = URL.createObjectURL(b);

            console.log(bUrl); // blob:http://localhost:8090/87341e25-e43c-4ef6-8db8-fbee68eea76c
        });
    </script>

    <img id="img" />
    <div id="container" style="width: 20px; height: 20px;"></div>
    <script>
        (function () {
            // 使用Blob URL作为img的src
            // fetch('http://localhost:8090/static/1x1.png')
            //     .then(res => res.blob())
            //     .then(res => {
            //         var imgsrc = URL.createObjectURL(res);
            //         var img = document.querySelector('#img');

            //         img.onload = function() {
            //             URL.revokeObjectURL(imgsrc);
            //         }
            //         img.src = imgsrc;
            //     });

            // 使用Blob URL作为内联样式的背景图片
            fetch('http://localhost:8090/static/1x1.png')
                .then(res => res.blob())
                .then(res => {
                    var imgsrc = URL.createObjectURL(res);
                    var container = document.querySelector('#container');
                    var cssElm = document.createElement('style');

                    cssElm.textContent = '#container { background-image: url('+ imgsrc +') }';
                    document.head.append(cssElm);
                    URL.revokeObjectURL(imgsrc);
                });

            // fetch('http://localhost:8090/static/1x1.png')
            //     .then(res => res.blob())
            //     .then(res => {
            //         var imgsrc = URL.createObjectURL(res);
            //         var container = document.querySelector('#container');

            //         container.style.backgroundImage = 'url(' + imgsrc + ')';
            //     });
        })();
    </script>

</body>

</html>